<template>
  <div class="root">
    <van-nav-bar
      :title="$route.meta.title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit">
      <van-field
        v-model="title"
        name="主题"
        label="主题"
        placeholder="主题"
        :rules="[{ required: true, message: '请填写主题' }]"
      />
      <van-field
        v-model="info"
        name="内容"
        label="内容"
        placeholder="内容"
        rows="1"
        autosize
        type="textarea"
        maxlength="50"
        show-word-limit
      />
      <van-field
        v-model="deadLine"
        name="期限"
        label="期限"
        placeholder="期限"
        :clickable="true"
        @focus="showPopup = true"
        readonly
      />
      <div class="btn">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <van-popup
      v-model="showPopup"
      round
      position="bottom"
      :style="{ height: '30%' }">
      <template>
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          @confirm="pick"
          @cancel="showPopup=false"
        />
      </template>
    </van-popup>
  </div>
</template>
<script>
export default {
  data () {
    return {
      title: '',
      info: '',
      deadLine: '',
      showPopup: false,
      currentDate: new Date(),
      minDate: new Date(this.$moment(new Date()).format('YYYY'))
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    pick (value) {
      this.showPopup = false
      this.deadLine = this.$moment(value).format('YYYY-MM-DD')
    },
    onSubmit () {
      this.$store.dispatch('app/addTodo', {
        id: this.$moment().format('X'),
        title: this.title,
        info: this.info,
        deadLine: this.deadLine,
        done: false
      }).then(() => {
        this.$notify({ type: 'success', message: '添加成功' })
        setTimeout(() => {
          this.$router.go(-1)
        }, 700)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-button{
  height: 60px;
}
.btn{
  margin: 16px;
  position:relative;
  top: 20px;
}
</style>
